<template>
  <el-dialog
    title="修改菜单"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :show-close="false"
    width="36%"
    top="5vh"
  >
    <el-form :model="form" ref="ruleForm" :rules="rules">
      <el-form-item label="菜单类型" prop="menuType">
        <!-- <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label> -->
        <el-radio-group v-model="form.menuType" disabled>
          <el-radio style="margin-left:10px" label="目录" border>目录</el-radio>
          <el-radio label="菜单" border>菜单</el-radio>
          <el-radio label="功能" border>功能</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单" prop="menuParentName">
        <el-select v-model="menuParentName" disabled placeholder="全部" class="input_width"></el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item v-if="catalogVisiable && menuVisiable" label="菜单标识" prop="menuSign">
        <el-input v-model="form.menuSign" class="input_width"></el-input>
      </el-form-item>
      <el-form-item v-if="catalogVisiable && actionVisiable" label="菜单地址" prop="menuUrl">
        <el-input v-model="form.menuUrl" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="menuIcon">
        <el-input v-model="form.menuIcon" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="排序号" prop="menuQueueNumber">
        <el-input type="number" v-model="form.menuQueueNumber" class="input_width input_left"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.menuStatus" style="margin-left:30px">
          <el-radio label="有效" border>有效</el-radio>
          <el-radio label="无效" border>无效</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="menuRemarks">
        <el-input type="textarea" v-model="form.menuRemarks" :rows="4" class="text_area"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="updateMenu('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { Message } from "element-ui";
export default {
  props: ["sendMenu"],
  components: {},
  data() {
    const validateName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入菜单名称"));
      } else {
        callback();
      }
    };
    return {
      visible: true,
      catalogVisiable: true,
      menuVisiable: true,
      actionVisiable: true,
      menuParentName: "",
      form: {
        menuType: "",
        menuName: "",
        menuSign: "",
        menuUrl: "",
        menuIcon: "",
        menuQueueNumber: 0,
        menuStatus: 0,
        menuRemarks: "",
      },
      formLabelWidth: "120px",
      rules: {
        menuName: [
          { validator: validateName },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符" },
        ],
      },
    };
  },
  methods: {
    cancle() {
      this.$emit("closeDialog", false);
    },
    updateMenu(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const p = new URLSearchParams();
          p.append("menuId", this.form.menuId);
          p.append("menuName", this.form.menuName);
          // p.append('menuSign',this.form.menuSign)
          // p.append('menuUrl',this.form.menuUrl)
          // p.append('menuIcon',this.form.menuIcon)

          if (this.form.menuSign != undefined) {
            p.append("menuSign", this.form.menuSign);
          }
          if (this.form.menuUrl != undefined) {
            p.append("menuUrl", this.form.menuUrl);
          }
          if (this.form.menuIcon != undefined) {
            p.append("menuIcon", this.form.menuIcon);
          }
          p.append("menuQueueNumber", this.form.menuQueueNumber);
          p.append("menuStatus", this.form.menuStatus == "有效" ? 1 : 0);
          p.append("menuRemarks", this.form.menuRemarks);
          const vm = this;
          vm.$http({
            method: "post",
            url: "/menu/updateMenu",
            data: p,
          }).then((res) => {
            if (res.data == 1) {
              Message({ message: "修改成功", type: "success" });
              this.$store.dispatch("findAllMenu");
            } else {
              Message({ message: "修改失败", type: "error" });
            }
          });
          this.$emit("refreshMenu");
          this.$emit("closeDialog", false);
        } else {
          this.$message.error("修改失败，格式验证不通过");
        }
      });
    },
    selectNameByParentId(id) {
      const that = this;
      this.$http
        .get("/menu/getMenuNameByPid", {
          params: { menuParentId: id },
        })
        .then((res) => {
          console.log(res.data);
          that.menuParentName = res.data;
        });
    },
    edit() {
      this.form.menuId = this.sendMenu.menuId;
      this.form.menuParentId = this.sendMenu.menuParentId;
      this.form.menuStatus = this.sendMenu.menuStatus == 1 ? "有效" : "无效";
      this.form.menuType = this.sendMenu.menuType;
      this.form.menuName = this.sendMenu.menuName;
      this.form.menuSign = this.sendMenu.menuSign;
      this.form.menuUrl = this.sendMenu.menuUrl;
      this.form.menuIcon = this.sendMenu.menuIcon;
      this.form.menuQueueNumber = this.sendMenu.menuQueueNumber;
      this.form.menuRemarks = this.sendMenu.menuRemarks;
    },
  },
  mounted() {
    // this.form = this.sendMenu;
    this.selectNameByParentId(this.sendMenu.menuParentId);
    this.edit();
    if (this.form.menuType == "目录") {
      this.menuVisiable = true;
      this.actionVisiable = true;
      this.catalogVisiable = false;
    } else if (this.form.menuType == "菜单") {
      this.actionVisiable = true;
      this.catalogVisiable = true;
      this.menuVisiable = false;
    } else if (this.form.menuType == "功能") {
      this.catalogVisiable = true;
      this.menuVisiable = true;
      this.actionVisiable = false;
    }
  },
};
</script>
<style lang='less' scoped>
.input_width {
  width: 350px;
}
.input_left {
  margin-left: 15px;
}
.text_area {
  margin-left: 30px;
  width: 78%;
}
</style>